/*
 * Styles for component AlertBox.
 */

@import '@fontsource/inter/300.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';

.alert-box {
    padding: 16px 32px 16px 24px;
    height: 52px;
    box-shadow: 0 12px 24px rgba(38, 46, 53, 0.12);
    border: 1px solid;
    border-radius: 5px;
}

.alert-box-component {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.alert-box-icon {
    width: 20px;
    height: 20px;
}

.alert-box-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    width: 458px;
    height: 46px;
    flex-grow: 1;
}

.bg-success {
    background-color: #ECFDF5;
}

.bg-warning {
    background-color: #FFFBEB;
}

.bg-info {
    background-color: #E8EDFB;
}

.border-success {
    border-color: #48A79A;
}

.border-warning {
    border-color: #FFCA7B;
}

.border-info {
    border-color: #4C81EB;
}

.title-success {
    color: #0D6A61;
}

.title-warning {
    color: #D97706;
}

.title-info {
    color: #154AB6;
}